<template>
	<div class="search_item df jc">
		<div class="search_cne page_content">
			<el-input v-model="search" class="search_input"
				:style="{ '--el-input-border-radius': '25px', '--el-border-color': '#0087FD', '--el-text-color-placeholder': '#0087FD' }"
				placeholder="请输入搜索内容" @change="GetCourseList">
				<template #suffix>
					<div class="search_btn df ac jc" @click="GetCourseList">
						<el-icon style="margin-right: 5px;">
							<Search />
						</el-icon>搜索
					</div>
				</template>
			</el-input>
			<div class="search_keyword df ffrw">
				<div class="name" v-for="item in searchlist" :key="item.id" @click="searchKerwordFn(item)">{{ item.keywords }}
				</div>
			</div>
		</div>
	</div>
	<div class="page_content">
		<div class="top_tab df ac">
			<img src="@/assets/images/search.png" alt=""> 共找到<span style="color:#FE5B11">{{ CourseList.length }}</span>个搜索结果
		</div>
		<template v-if="CourseList.length > 0">
			<!-- <template v-if="true"> -->
			<div class="search_rusult df ffrw">
				<xy-course-item v-for="item in CourseList" :isSearch="true" :item="item" :key="item.id"
					:searName="search"></xy-course-item>
			</div>
			<div class="page df jc">
				<!-- <el-pagination background  :pager-count="1" layout="prev, pager, next" :default-page-size="pagelist.limit" @current-change="oncurrentChange"  :total="pagelist.total" class="mt-4" /> -->
				<el-pagination background :pager-count="11" ayout="prev, pager, next" :default-page-size="pagelist.limit"
					@current-change="oncurrentChange" :total="pagelist.total" class="mt-4" />
			</div>
		</template>
		<template v-else>
			<xy-empty></xy-empty>
		</template>
	</div>
</template>
<script setup lang="ts">
import api from "@/api/api";
import { Search } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
//import {} from "vue"

//组件命名-----
defineOptions({ name: "search-index" })
const route = useRoute() as any
const search = ref(route.query.name)
const searchlist = ref<any>([])
const GetHotSearchList = async () => {
	const res = await api.GetHotSearchList_API()

	if (res.code === 0) {
		searchlist.value = res.data
	}
}
const pagelist = reactive({
	page: 1,
	limit: 8,
	total: 0,
})

const loading = ref(false)
const CourseList = ref<any>([])
const GetCourseList = async () => {
	loading.value = true
	const res = await api.GetCourseList_API({ page: pagelist.page, limit: pagelist.limit, keywords: search.value })
	if (res.code === 0) {
		CourseList.value = res.data.data
		pagelist.total = res.data.total
	}
	loading.value = false
}


const oncurrentChange = (e) => {
	console.log("🚀 ~ oncurrentChange ~ e:", e)
	pagelist.page = e
	GetCourseList()
}

onMounted(() => {
	GetHotSearchList()
	GetCourseList()
})
/**
 * 搜索关键词点击
 */
const searchKerwordFn = (item: any) => {
	search.value = item.keywords
	GetCourseList()
}
</script>

<style lang="scss" scoped>
.search_item {
	background: #F5F5F7;
	height: 156px;

	.search_cne {
		margin: 40px 0;
	}

	.search_input {
		width: 800px;
		height: 50px;

		:deep(.el-input__wrapper) {
			padding: 0px 0px 0px 30px;
			font-size: 18px;
		}
	}

	.search_btn {
		width: 148px;
		height: 100%;
		border-radius: 25px;
		background-color: $bcolor;
		color: $white;
		font-size: 18px;
		cursor: pointer;
	}
}



.search_keyword {
	margin-top: 15px;

	.name {
		font-size: 14px;
		cursor: pointer;
		color: $color1;
		margin-right: 20px;
	}
}

.top_tab {
	padding: 30px 0;
	font-size: 24px;

	img {
		width: 26px;
		object-fit: contain;
		height: 24px;
		margin-right: 10px;
	}
}
.page{
	margin-bottom: 30px;
}

</style>
